<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染指令</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <p style="color: red">v-if学习（隐藏是物理删除）</p>
    <p v-if="flag">这是被v-if控制的元素</p>
    <p style="color: red">v-show学习（隐藏是使用display=none）</p>
    <p v-if="flag">这是被v-show控制的元素</p>

    <p style="color: red">v-else-if学习</p>
    <span v-if="type===1">type=1展示这里</span>
    <span v-else-if="type===2">type=2展示这里</span>
    <span v-else>其他type展示这里</span>
</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    const vm = new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            flag:true,
            type:1
        }
    });

</script>
